Ext.define("EM.view.event.TimelineView", {
    extend:"Gnt.panel.Gantt",
    requires:[
        'Gnt.plugin.TaskContextMenu',
        'Gnt.column.StartDate',
        'Gnt.column.EndDate',
        'Gnt.column.Duration',
        'Gnt.column.ResourceAssignment',
        'Sch.plugin.TreeCellEditing',
        'Sch.plugin.Pan'
    ],

    initComponent:function () {

        var me = this;
        Ext.apply(this, {


            // Add some extra functionality
            plugins:[
                Ext.create("EM.view.event.TimelineContextMenu"),
                Ext.create("Sch.plugin.Pan"),
                Ext.create('EM.view.event.TimelineTreeCellEditing', {
                    clicksToEdit:1,
                    listeners:{
                        edit:function () {
                        }
                    }
                })
            ],

//            tipConfig: Ext.create('Ext.tip.ToolTip', {
//                //target: 'clearButton',
//                showDelay:0
//            }),
//            // Define an HTML template for the tooltip
//            tooltipTpl:new Ext.XTemplate(
//                '<h4 class="tipHeader">{Name}</h4>',
//                '<table class="taskTip">',
//                '<tr><td>Start:</td> <td align="right">{[Ext.Date.format(values.StartDate, "y-m-d")]}</td></tr>',
//                '<tr><td>End:</td> <td align="right">{[Ext.Date.format(Ext.Date.add(values.EndDate, Ext.Date.MILLI, -1), "y-m-d")]}</td></tr>',
//                //'<tr><td>Progress:</td><td align="right">{PercentDone}%</td></tr>',
//                '</table>'
//            ).compile(),

            // Define the static columns
            columns:[
                {
                    id:'events-timeline-treecellediting',
                    xtype:'treecolumn',
                    header:'Events',
                    toggleOnDblClick:false,
                    sortable:true,
                    dataIndex:'Name',
                    width:200,
                    border:0,
                    field:{
                        allowBlank:false
                    }
                }
            ],
            lockedViewConfig:{
                plugins:{
                    ptype:'treeviewdragdrop',
                    appendOnly:true
                }
            }
        });


        this.callParent(arguments);
    }
});